<!DOCTYPE html>
<html lang="en">
<head>
<title>用户评价</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="../../staticFile/images/userIndex/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="../../staticFile/js/common/mobileCommon.min.js"></script>
<link type="text/css" rel="stylesheet" href="../../staticFile/css/mobile/common.css">
<link type="text/css" rel="stylesheet" href="../../staticFile/css/mobile/mobileTips.css">
<style type="text/css">
.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.order-evaluation {/*width: 838px;background: #fff;z-index: 200;margin:-40px auto auto auto;*/padding:0.3rem;}
.order-evaluation .rate-title{font-size:0.8rem;/*padding-bottom:20px;border-bottom:1px dashed #dbdbdb;*/}
.order-evaluation p{font-size:0.5rem;color:#999;/*line-height:45px;margin-bottom:0;margin-top: -14px;*/}
.order-evaluation .order-evaluation-text{font-size:0.5rem;color:#333;line-height:1rem;padding-left:0.3rem;background:#f3f3f3;margin-bottom:0.4rem;/*margin-top:20px;*/}
.impression-list ul li{width:2.9rem;/*height:43px;*/border:1px solid #e8e8e8;text-align: center;font-size:0.5rem;line-height:1rem;margin-right:0.2rem;margin-bottom:0.3rem;float:left;overflow: hidden;position:relative;}
.impression-list ul li.checked i{display: block;}
.impression-list ul li.checked{border:1px solid #e84c3d;color: #e84c3d;font-weight: bold;}
.order-evaluation-textarea{position:relative;height: 4.5rem;}
.order-evaluation-textarea textarea{height:3rem;border:1px solid #e8e8e8;position:absolute;top:0;left:0;line-height:0.8rem;padding:0.2rem;color:#666;font-size: 0.5rem;}
.word-num{position:absolute;bottom:0.2rem;font-size:0.4rem;color:#999;right:0.3rem;}
.word-num em{color:#e84c3d;font-size: 0.5rem;}
.order-evaluation>a{width:4rem;height:1.2rem;display: block;text-align: center;line-height:1.2rem;background:#f36a5a;float:right;color:#fff;font-size:0.6rem;font-weight: bolder;}
/*.impression-list ul li i {display: none;color: #e84c3d;position: absolute;right: -4px;bottom: -14px;fonts-size: 20px;}*/
.order-evaluation>a:hover{background: #e84c3d;}
/*.rate-grade-star li label,.con span{ fonts-size: 18px; margin-right: 20px; line-height: 23px;}
.rate-grade-star li span{display: inline-block; vertical-align: middle;}*/
.level{color:#e84c3d;font-size:0.5rem;margin-left:0.3rem;position: relative;top: -0.2rem;}


.star-five {
    float: left;
    margin-left:0.2rem;
    position: relative;
    display: block;
    color: #C1BFBF;/*#f3f3f3*/
    width: 0px;
    height: 0px;
    border-right: 0.33rem solid transparent;
    border-bottom: 0.23rem  solid #C1BFBF;/*#f3f3f3*/
    border-left: 0.33rem solid transparent;
    -moz-transform:rotate(35deg);
    -webkit-transform:rotate(35deg);
    -ms-transform:rotate(35deg);
    -o-transform:rotate(35deg);
}
.star-five:before {
    border-bottom: 0.26rem solid #C1BFBF;/*#f3f3f3*/
    border-left: 0.1rem solid transparent;
    border-right: 0.1rem solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -0.15rem;
    left: -0.22rem;
    display: block;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
.star-five:after {
    position: absolute;
    display: block;
    color: #C1BFBF;/*#f3f3f3*/
    top: 0.015rem;
    left: -0.35rem;
    width: 0px;
    height: 0px;
    border-right: 0.33rem solid transparent;
    border-bottom: 0.23rem solid #C1BFBF;/*#f3f3f3*/
    border-left: 0.33rem solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform:    rotate(-70deg);
    -ms-transform:     rotate(-70deg);
    -o-transform:      rotate(-70deg);
    content: '';
}
</style>
<script type="text/javascript" src="../../staticFile/js/common/constant.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/commonUtil.js"></script>
<script type="text/javascript" src="../../staticFile/js/plugins/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/mobileTips.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/getDictionaries.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/simpleTipsUtil.js"></script>
</head>
<body>
<div class="order-evaluation clearfix">
    <span class="rate-title">给对方的评价</span>
    <p>请严肃认真对待此次评价哦,因为您的评价对我们真的真的非常重要！</p>
    <div class="rate-grade-star" style="height: 0.8rem;">
        <span id="fiveStar0" class="star-five" style="margin-left:0;"></span>
        <span id="fiveStar1" class="star-five"></span>
        <span id="fiveStar2" class="star-five"></span>
        <span id="fiveStar3" class="star-five"></span>
        <span id="fiveStar4" class="star-five"></span>
        <em class="level"></em>
    </div>
    <div class="order-evaluation-text">
        想想本次服务给您留下了啥印象呢？
    </div>
    <div class="impression-list">
        <ul class="clearfix"></ul>
    </div>
    <div class="order-evaluation-textarea">
        <textarea name="content" id="userRateText" onkeyup="wordsNumberDeal();" ></textarea>
        <span class="word-num">还可以输入<em id="textCount">140</em>个字</span>
    </div>
    <a href="javascript:;" rel="external nofollow" id="submitUserRate">提交评价</a>
</div>
</body>
</html>
<script type="text/javascript">
var redStarNum = -1;
/*
 * 根据index获取 str
 */
function byIndexLeve(i){
    if (i < 0 || i > 4){
        return '';
    }
    var rateTextArray = ['1分很不满意','2分不满意','3分一般','4分满意','5分很满意'];
    return rateTextArray[i];
}

$(".star-five").click(function (e) {
    redStarNum = parseInt(this.id.replace('fiveStar',''));
    $('.star-five').each(function () {
        var starNum = parseInt(this.id.replace('fiveStar',''));
        if (starNum <= redStarNum){
            setStarLevel(this,'red');
        }else {
            setStarLevel(this,'#C1BFBF');
        }
    });
    $(".level").html(byIndexLeve(redStarNum));
});

/**
 * 设置星号等级
 * @param starObj
 * @param color
 */
function setStarLevel(starObj,color){
    $(starObj).css({'color': color,'border-bottom': '0.23rem  solid ' + color})
        .append('<style>#' + starObj.id + ':before{border-bottom: 0.26rem solid ' + color + ';}#' + starObj.id + ':after{color: ' + color + ';border-bottom: 0.23rem solid ' + color + ';}</style>');
}
$(function(){
    var winWidth = $(window).width(), rem = $('body').css('font-size');
    $('#userRateText').css('width', (winWidth - 1.2 * parseInt(rem.replace('px',''))) + 'px');
    loadImpression();
    //印象
    $(".user-impression").click(function(){
        if($(this).hasClass('checked')){
            //当前为选中状态，需要取消
            $(this).removeClass('checked');
        }else{
            //当前未选中，需要增加选中
            $(this).addClass('checked');
        }
    });
    $("#submitUserRate").click(function(){
    	//防止重复提交
        if(this.innerText == '正在提交...'){
    		return;
    	}
    	var userImpression = '';
    	if(redStarNum < 0){
    		mTips('亲，您忘了评价等级了啦！');
    		return;
    	}
    	//评价印象
    	$(".user-impression").each(function(){
            if($(this).hasClass('checked')){
            	userImpression += $(this).attr('data-impression') + ',';
            }
        });
    	if(isNull(userImpression)){
            mTips('亲，您还没选择对方给您留下的印象');
    		return;
    	}
    	userImpression = userImpression.substring(0,userImpression.length - 1);
    	//评价文字内容
    	var wordsLength = $("#userRateText").val().length;
    	if(wordsLength < 5){
            mTips('亲，评价内容至少5个字噢！');
    		return;
    	}
    	var billId = sessionStorage.getItem('userRateBillId');
    	if(isNull(billId)){
            mTips('亲，评价的单号不能为空噢');
    		return;
    	}
    	this.innerText = '正在提交...';
    	submitUser(redStarNum + 1,userImpression,billId);
    })
});

//评价字数限制
function wordsNumberDeal(){
    var urt = $("#userRateText");
    var curLength = urt.val().length;
    if(curLength > 140) {
        var num = urt.val().substr(0,140);
        urt.val(num);
        mTips("超过字数限制，多出的字将被截断！");
    }else{
        $("#textCount").text(140 - curLength);
    }
}
/**
 * 提交用户评价
 * levelNum：评价等级
 userImpression: 评价印象
 billId ： 是基于哪个服务单的评价
 */
function submitUser(levelNum,userImpression,billId) {//rateIssueOrRob
	 $.ajax({
		type : "POST",
		url : '/mServiceOrder/submitUserRate',
		data : {
			levelNum: levelNum,
			userImpression: userImpression,
			rateText: $("#userRateText").val(),
            billId: billId//,
			//rateIssueOrRob: rateIssueOrRob
		},
		dataType : 'json',
		cache : false,
		async: false,
		success : function(result) {
			if (result == '0') {
				sessionStorage.removeItem('userRateBillId');
				sessionStorage.removeItem('rateIssueOrRob');
				mTips('感谢您的评价！么么哒(* ￣3)(ε￣ *)','goIndex()');
			}else if (result == '1') {
                mTips('系统获取参数失败，请重试');
			}else if (result == '2') {
                mTips('请您登录后再评价噢');
			}/*else if (result == '3') {
                mTips('您不是当前服务单的发布人，不能对服务提供者进行评价');
			}else if (result == '4') {
                mTips('您不是当前服务单的服务提供者，不能对服务发布者进行评价');
			}*/else if (result == '5') {
                mTips('您的评价信息提交失败，请稍候再试');
			}else if (result == '6') {
                mTips('您的评价信息保存失败');
			}
			$('#submitUserRate').text('提交评价');
		},
		error: function() {
            mTips('系统繁忙，请您稍候再试');
			$('#submitUserRate').text('提交评价');
		}
	});
}
//加载用户印象信息
function loadImpression() {
    var issueOrRob = sessionStorage.getItem('rateIssueOrRob');
    //issueOrRob:0,服务方对服务提供方评价;issueOrRob:1,服务提供方对服务方评价
    var dicId = parseInt(issueOrRob) == 0 ? 67 : 74;
    var impressionArray = getDictionaries(dicId);
    if (!isNull(impressionArray)){
        for (var g = 0; g < impressionArray.length; g ++){
            var imp = impressionArray[g], cssStr = '';
            console.log('g:' + g + ',a=' + (g % 3));
            if (g % 3 == 2){
                cssStr = 'style="margin-right:0px;"';
            }
            $('.impression-list ul').append('<li class="user-impression" data-impression="' + imp.id + '" ' + cssStr + '>' + imp.dicName + '</li>');//<i class="iconfont icon-checked"></i>
        }
    }
}
function goIndex() {
    window.location.href = 'mIndex.html';
}
</script>